import React, { useState, useEffect } from 'react';
import { List, Icon, Card, Input, Modal, message, Button, Drawer, Table,Switch } from 'antd';

import axios from 'axios'
import servicePath from '../config/apiUrl'
import ClearableLabeledInput from 'antd/lib/input/ClearableLabeledInput';
import moment from "moment"
const { confirm } = Modal;
const { TextArea } = Input;





function AddImg(props) {
    const [imgurl, setImgurl] = useState("")
    const [homeImg,setHomeImg]= useState([])
    const initMsg = () => {
        axios({ method: 'post', url: servicePath.getAllHomeImg, withCredentials: true }).then(res => {
            setHomeImg(res.data.data)
        })
    }
    useEffect(() => {
        initMsg()
    }, [])

    let pushImg=(e)=>{
        axios({ method: 'post', url: servicePath.setHomeImg,data:{url:imgurl}, withCredentials: true }).then(res => {
            message.success("图片添加成功")
            initMsg()
        })
    }
    let handelChange = (record,text)=>{
        axios({ method: 'post', url: servicePath.changeHomeImgStatus,data:{id:record.id,status:text==0?1:0}, withCredentials: true }).then(res => {
            initMsg()
        })
    }
    let handelDelete =(record,text)=>{
        axios({ method: 'post', url: servicePath.deleteImg,data:{id:record.id}, withCredentials: true }).then(res => {
            message.success("图片删除成功")
            initMsg()
        })
    }
    let columns = [{
        title: '图片地址',
        dataIndex: 'url',
        key: 'url',
        ellipsis: true
        
    },
    {
        title: '是否显示',
        dataIndex: 'status',
        key: 'status',
        render: (text,record) => <Switch checked={text==1} onChange={handelChange.bind(this,record,text)}  />,
    },
    {
        title: '操作',
        dataIndex: 'url',
        key: 'url',
        render: (text,record) => <Button  onClick={handelDelete.bind(this,record,text)}>
            删除
        </Button>,
        
    },
]
    return (
        <div>
           <div style={{ display: 'flex', marginTop: "20px" }}>
                <Input.Group compact>
                    <Input style={{ width: '30%' }} disabled={true} defaultValue="您的图片地址" />
                    <Input style={{ width: '50%' }} onChange={e => {
                        setImgurl(e.target.value)
                    }} defaultValue="" value={imgurl} />
                </Input.Group>
               
            </div>

            <Button type="primary"  onClick={pushImg} block style={{ marginTop: "20px" }}>
                提交图片地址
            </Button>

            <Table columns={columns} dataSource={homeImg} />
        </div>
    )

}

export default AddImg